<template>
  <table >
    <thead class="touBu">
      <tr>
        <th class="headline">
          <slot name="title"></slot>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <slot name="ranking" :item="item" ></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
  props: {
      data:Array
  }
  }
</script>

<style lang="less" scoped>
table {
  margin: 50px auto;
  width: 400px;
  .touBu {
    line-height: 50px;
    background-color: rgb(0, 132, 255);
    padding-left: 30px;
    .headline {
      border-radius: 10px 10px 0 0;
      color: white;
      font-size: 20px;
      font-weight: 400;
    }
  }
  tbody {
    tr {
      .HotSearch {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        font-size: 18px;
        img {
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }
      .recommend{
        padding-top: 20px;
        div{
          position: relative;
          line-height: 27px;
          color: #747171;
          font-size: 18px;
          padding-left: 20px;
          padding-right: 20px;
          .compellation{
            font-size: 20px;
            color: black;
          }
          button{
           position: absolute;
           right: 20px;
           width: 100px;
           height: 30px;
           border-radius: 15px;
           background-color: rgb(0, 122, 255);
           color: white;
           border-style: none;
          }
        }
      }

    }
  }
}
</style>